import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import {findDOMNode} from 'react-dom';
import '../../style/talk.less'
import ItemMsgOther from "./ItemMsgOther";
import ItemMsgSelf from "./ItemMsgSelf";
import MsgBox from "./msgBox";
import EmojiBox from "./emojiBox";
import Common from "../common/common";


class Talk extends Common {

    // eslint-disable-next-line no-useless-constructor
    constructor(props) {
        super(props);
        this.state = {
            talkInputHeight: 0,
            emojiBoxHeight: 0,
            emojiBoxIsExpression: false,
            boxTransform: 0,
            msgList: [
                {
                    id: 1,
                    name: "一个好人",
                    avatar: "http://img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
                    type: 1,
                    direction: 1,
                    content: "世上没有一种药能缓解时间的毒药",
                },
                {
                    id: 2,
                    name: "woodp",
                    avatar: "http://img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
                    type: 2,
                    direction: 1,
                    content: "https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg",
                },
                {
                    id: 3,
                    name: "woodp",
                    avatar: "http://img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
                    type: 1,
                    direction: 1,
                    content: "世上没有一种药能缓解时间的毒药世上没有一种药能缓解时间的毒药世上没有一种药能缓解时间的毒药世上没有一种药能缓解时间的毒药世上没有一种药能缓解时间的毒药",
                },
                {
                    id: 4,
                    name: "没顶顶顶哇哇",
                    avatar: "http://img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
                    type: 1,
                    direction: 1,
                    content: "",
                },
                {
                    id: 5,
                    name: "一个好人",
                    avatar: "http://img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
                    type: 1,
                    direction: 1,
                    content: "世上没有一种药能缓解时间的毒药",
                },
                {
                    id: 6,
                    name: "一个好人",
                    avatar: "http://img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
                    type: 1,
                    direction: 0,
                    content: "世上没有一种药能缓解时间的毒药",
                },
                {
                    id: 7,
                    name: "一个好人",
                    avatar: "http://img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
                    type: 1,
                    direction: 1,
                    content: "世上没有一种药能缓解时间的毒药",
                },
            ],


            talkContent: 0,
            oldOffsetHeight: 0,
            OffsetHeight: 0,
            keyboardHeight: 0,
            talkBottomPosition: 0,
            talkInputHeightOffsetTop: 0,
            keyboardBottom: 0,
        }
        this.talkContent = React.createRef();
        this.talkMain = React.createRef();
        this.talkInputHeight = React.createRef();
        this.talkBottomPosition = React.createRef();
        this.talkHeader = React.createRef();
        this.setTimeout = null;
    }

    componentDidMount() {
        // transform: translateY(-400px);
        this.setState({
            emojiBoxHeight: document.body.clientHeight / 2 - 80,
            talkInputHeight: this.talkInputHeight.current.offsetHeight,
            oldOffsetHeight: document.body.clientHeight,
            OffsetHeight: document.body.clientHeight,
            talkContent: this.talkContent.current.offsetHeight,
            talkBottomPosition: this.talkBottomPosition.current.offsetTop,
            talkInputHeightOffsetTop: this.talkInputHeight.current.offsetTop + this.talkInputHeight.current.clientHeight,
        });

        //保持最新消息在底部
        this.scrollTop();
        window.onresize = () => {
            // let keyboardBottom=(this.state.oldOffsetHeight-(this.state.oldOffsetHeight-document.body.clientHeight))-this.talkBottomPosition.current.offsetTop;
            // if(this.state.oldOffsetHeight-document.body.clientHeight<10){
            //     keyboardBottom=0
            // }
            // setTimeout(() => {
            //     this.talkInputHeight.current.scrollIntoView();
            //     this.setState({
            //         OffsetHeight: document.body.clientHeight,
            //         talkContent: this.talkContent.current.offsetHeight,
            //         keyboardHeight: this.state.oldOffsetHeight - document.body.clientHeight,
            //         talkInputHeightOffsetTop: this.talkInputHeight.current.offsetTop + this.talkHeader.current.offsetHeight,
            //         talkBottomPosition: this.talkBottomPosition.current.offsetTop,
            //     });
            // }, 200)
            this.scrollTop();

        }


    }

    /**
     * 保持最新消息在底部
     */
    scrollTop() {
        this.setTimeout=setTimeout(() => {
            if (this.talkMain.current != null) {
                this.talkMain.current.scrollTop = this.talkMain.current.scrollHeight;
            }
        }, 10);
    }




    /**
     * 消息列表
     * @returns {*[]}
     */
    msgList() {
        return this.state.msgList.map((v, i) => {
            switch (v.direction) {
                case 1:
                    return <ItemMsgOther key={i} msg={v}/>;
                case 0:
                    return <ItemMsgSelf key={i} msg={v}/>
            }
        });
    }

    componentWillUnmount(): void {
        clearTimeout(this.setTimeout)
    }

    render() {

        // style={{transform: " translateY(-" + 0 + "px)"}}
        return (
            <div className="talkContent" ref={this.talkContent}>
                <AppBar position="static" className="talkHeader" ref={this.talkHeader}>
                    <Toolbar>
                        <IconButton edge="start" onClick={() => {
                            this.props.history.go(-1)
                            // console.log(this.props)
                        }} color="inherit" aria-label="menu">
                            <i className="talkHeaderBack iconfont">&#xe744;</i>
                        </IconButton>
                        <label>不平凡的路(19)</label>
                    </Toolbar>
                </AppBar>

                {/*消息列表 和 输入框*/}
                {/*<div className="talkMain" style={{transform: " translateY(-" + 0 + "px)",marginBottom:this.state.keyboardBottom+"px"}}  >*/}

                {/*</div>*/}
                <div className="talkMain" style={{transform: " translateY(-" + 0 + "px)"}}
                     id="talkMain" ref={this.talkMain}>
                    {/*<p>  全局高: {this.state.oldOffsetHeight}</p>*/}
                    {/*<p>  talkContent的高度: {this.state.talkContent}</p>*/}
                    {/*<p>  当前可视区域高度: {this.state.OffsetHeight}</p>*/}
                    {/*<p>  键盘高度:{this.state.keyboardHeight}</p>*/}
                    {/*<p>  输入框距离顶部:{this.state.talkInputHeightOffsetTop}</p>*/}
                    {/*<p>  输入框底部距离顶部:{this.state.talkBottomPosition}</p>*/}
                    {/*<p>  keyboardBottom:{this.state.keyboardBottom}</p>*/}
                    {/*<p>  keyboardBottom:{this.state.keyboardBottom}</p>*/}
                    {this.msgList()}
                </div>
                <div className="talkBottomPosition" ref={this.talkBottomPosition}/>

                <div className="talkInput" ref={this.talkInputHeight} style={{transform: " translateY(-" + 0 + "px)"}}>
                    <MsgBox
                        onClick={() => {
                            this.setState({
                                emojiBoxIsExpression: false,
                            })
                        }}
                        onExpression={(isExpression) => {
                            this.setState({
                                emojiBoxIsExpression: isExpression,
                            });
                            this.scrollTop();
                        }}
                        onSubmit={(msg) => {
                            let item = {
                                id: this.state.msgList.length + 1,
                                name: "一个好人",
                                avatar: "http://img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
                                type: 1,
                                direction: 0,
                                content: msg,
                            };
                            let msgList = this.state.msgList;
                            msgList.push(item);
                            this.setState({
                                emojiBoxIsExpression: false,
                                msgList: msgList
                            }, () => {
                                this.talkMain.current.scrollTop = this.talkMain.current.scrollHeight;
                            });

                        }}/>

                </div>
                {/*表情*/}
                {
                    this.state.emojiBoxIsExpression ?
                        <div className="emojiBox" style={{height: this.state.emojiBoxHeight + "px"}}>
                            <EmojiBox />
                        </div> : null
                }
                {
                    // (this.state.talkBottomPosition>this.state.talkInputHeightOffsetTop)&&(this.state.oldOffsetHeight!==this.state.OffsetHeight)?<div style={{height:this.state.talkInputHeight+"px"}} />:null
                }
            </div>
        )
    }
}

export default Talk
